<!DOCTYPE html>
<html lang="en" xmlns:th="http:www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Vue文件上传下载删除DEMO</title>

    <style>
        #app {
            z-index: 1;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-form :label-width="120">
            <el-form-item label="附件" prop="fileUrl">
                <el-input v-model="fileUrl" :disabled="true"></el-input>
                <el-upload style="width:480px;" class="upload-demo" :action="uploadUrl" :limit="1"
                    :show-file-list="true" :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove"
                    :on-success="uploadSuccess" :on-preview="handlePreview">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
        </el-form>
    </div>
    <script src="vue2.6.14.js"></script>
    <script src="elementui.js"></script>
    <script src="axios.min.js"></script>
    <script>
        var baseUrl = 'http://localhost:9000/vueupload/file/';
        var app = new Vue({
            el: '#app',
            data: {
                uploadUrl: baseUrl + 'upload',
                attach: '', // 附件名称
                fileUrl: '', // 附件下载地址
                fileList: []
            },

            methods: {
                handlePreview(file) {
                    let a = document.createElement('a')
                    a.target = '_blank';
                    a.href = this.fileUrl;
                    a.click();
                },
                handleExceed(files, fileList) {
                    this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
                },
                handleRemove(file, fileList) {
                    axios.post(baseUrl + 'remove?filename=' + this.attach).then((res) => {
                        console.log(res);
                        this.attach = '';
                        this.fileUrl = '';
                    }).catch(err => {
                        console.log(err);    //打印响应数据(错误信息)
                    });
                    console.log('删除文件：' + file.name)
                },
                beforeRemove(file, fileList) {
                    return this.$confirm(`确定移除 ${file.name}？`);
                },
                handleUploadError(error, file) {
                    console.log("文件上传出错：" + error)
                },
                uploadSuccess: function (response, file, fileList) {
                    console.log(response);
                    this.attach = response.data.filename;
                    this.fileUrl = baseUrl + 'download?filename=' + file.name
                }
            }
        });
    </script>
</body>

</html>